import CodeBlock from "../../../component/CodeBlock";
import { useAppSelector, useDispatch } from "../../../store/useAppSelector";
import { increment, decrement, addToNum } from "../../../store/modules/counterStore";
import { fetchChannelList } from "../../../store/modules/channelStore";
import { useEffect } from "react";

function Reduxjs() {
  const { count } = useAppSelector((state) => state.counter);
  const { channelList } = useAppSelector((state) => state.channel);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])

  return (
    <div className="tab-pane">
      <h1>Redux Toolkit 示例</h1>
      <p>Redux Toolkit 是 Redux 官方推荐的状态管理解决方案，简化了 Redux 的使用。</p>

      <h2>安装</h2>
      <CodeBlock code={"> pnpm add @reduxjs/toolkit react-redux"} />

      <h2>Counter 示例</h2>
      <div className="counter-demo" style={{ display: 'flex', gap: '10px', alignItems: 'center', fontSize: '24px' }}>
        <button className="mainButton" onClick={() => dispatch(addToNum(-10))}> -10 </button>
        <button className="errorButton" onClick={() => dispatch(decrement())}> - </button>
        <div style={{ width: '50px', textAlign: 'center' }} className="count-display">{count}</div>
        <button className="mainButton" onClick={() => dispatch(increment())}> + </button>
        <button className="mainButton" onClick={() => dispatch(addToNum(10))}> 10 </button>
      </div>

      <h2>代码实现</h2>
      <h3>1. 创建 counterSlice (src/store/modules/counterStore.ts)</h3>
      <CodeBlock code={`import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
    name: 'counter',
    // 初始化 store
    initialState: {
        count: 0
    },
    // 修改数据的方法 同步方法 支持直接修改
    reducers: {
        increment: (state) => {
            state.count += 1
        },
        decrement: (state) => {
            state.count -= 1
        }
    },
})

//结构出 actionCreater 函数
const { increment, decrement } = counterSlice.actions
//获取 reducer
const counterReducer = counterSlice.reducer

//以按需导出的方式导出actionCreater
export { increment, decrement }
//导出 reducer
export default counterReducer`} />

      <h3>2. 创建 store (src/store/index.ts)</h3>
      <CodeBlock code={`import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './modules/counterStore';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;`} />

      <h3>3. 在应用中提供 store (src/main.tsx 或 src/index.tsx)</h3>
      <CodeBlock code={`import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);`} />

      <h3>4. 在组件中使用 Redux hooks</h3>
      <CodeBlock code={`import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../store/modules/counterStore';

function Counter() {
  const count = useSelector((state: any) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div className="counter">
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

export default Counter;`} />
      <br />
      <h2>异步请求</h2>
      <ul style={{display:'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '10px' }}>
        {
          channelList.map((item: any) => (
            <li key={item.id}>{item.name}</li>
          ))
        }
      </ul>
    </div>
  );
}

export default Reduxjs;